<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
  <h:body>
    <ui:composition template="/template/base.xhtml">
      <ui:define name="content">
        <h:form id="proveedor-form">
          <p:growl id="growl" showDetail="true" sticky="true" />
          <spacer/>
          <p:panel header="Lista de proveedores registrados">
            <p:dataTable id="dtProv" var="proveedor" value="#{proveedorBean.proveedores}"
                         rows="10" paginator="true" paginatorPosition="bottom"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,15"
                         selection="#{proveedorBean.proveedorSelected}" rowKey="#{proveedor}"
                         selectionMode="single">

              <p:ajax event="rowSelect" listener="#{proveedorBean.onRowSelect}" />

              <p:column headerText="Razon Social" sortBy="#{proveedor.razonSocial}">
                <h:outputText value="#{proveedor.razonSocial}" />
              </p:column>
              <p:column headerText="RUC" sortBy="#{proveedor.ruc}">
                <h:outputText value="#{proveedor.ruc}" />
              </p:column>
              <p:column headerText="Telefono" sortBy="#{proveedor.telefono}">
                <h:outputText value="#{proveedor.telefono}" />
              </p:column>
              <p:column headerText="Direccion" sortBy="#{proveedor.direccion}">
                <h:outputText value="#{proveedor.direccion}" />
              </p:column>
              <f:facet name="footer">
                <p:commandButton process="dtProv" icon="ui-icon-document"
                                 value="Agregar" oncomplete="PF('dlgProvAdd').show()" />
                <p:commandButton process="dtProv" icon="ui-icon-pencil"
                                 value="Editar" oncomplete="PF('dlgProvEdit').show()"
                                 update=":PdglProvEdit" 
                                 disabled="#{proveedorBean.bloquearBotones}"/>
                <p:commandButton process="dtProv" icon="ui-icon-trash"
                                 value="Borrar" actionListener="#{proveedorBean.deleteProveedor}"
                                 update="dtProv"
                                 disabled="#{proveedorBean.bloquearBotones}">
                  <p:confirm header="Borrar Proveedor"
                             message="Estas seguro que queres borrar?" icon="ui-icon-alert" />
                </p:commandButton>
              </f:facet>
            </p:dataTable>
          </p:panel>
          <p:confirmDialog global="true" showEffect="fade"
                           hideEffect="explode">
            <p:commandButton value="Si" type="button"
                             styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
            <p:commandButton value="No" type="button"
                             styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
          </p:confirmDialog>

        </h:form>

        <p:dialog header="Proveedor seleccionada" id="PdlgProvAdd"
                  widgetVar="dlgProvAdd" modal="true" 
                  showEffect="fade" hideEffect="fade" resizable="false">
          <h:form id="form-add">
            <p:panelGrid columns="2" columnClasses="column">
              <p:outputLabel value="Razon Social" for="razon_social" />
              <p:inputText id="razon_social" required="true"
                           value="#{proveedorBean.razonSocial}" />
              <p:outputLabel value="RUC" for="ruc" />
              <p:inputText id="ruc" required="true"
                           value="#{proveedorBean.ruc}" />
              <p:outputLabel value="Telefono" for="telefono" />
              <p:inputText id="telefono" 
                           value="#{proveedorBean.telefono}" />
              <p:outputLabel value="Direccion" for="direccion" />
              <p:inputText id="direccion"
                           value="#{proveedorBean.direccion}" />
            </p:panelGrid>
            <p:commandButton process="form-add" value="Guardar" 
                             action="#{proveedorBean.addProveedor}"
                             style="text-align:right; float:right"
                             onclick="PdlgProvAdd.hide()" oncomplete=""
                             update=":proveedor-form:dtProv,:proveedor-form:growl">

            </p:commandButton>
          </h:form>
        </p:dialog>

        <p:dialog header="Proveedor seleccionada" id="PdglProvEdit"
                  widgetVar="dlgProvEdit" modal="true" showEffect="fade"
                  hideEffect="fade" resizable="false">

          <h:form id="form-edit">
            <p:panelGrid columns="2" columnClasses="column">
              <p:outputLabel value="Razon Social" for="razon_social" />
              <p:inputText id="razon_social" required="true"
                           value="#{proveedorBean.razonSocial}" />
              <p:outputLabel value="RUC" for="ruc" />
              <p:inputText id="ruc" required="true"
                           value="#{proveedorBean.ruc}" />
              <p:outputLabel value="Telefono" for="telefono" />
              <p:inputText id="telefono" 
                           value="#{proveedorBean.telefono}" />
              <p:outputLabel value="Direccion" for="direccion" />
              <p:inputText id="direccion"
                           value="#{proveedorBean.direccion}" />
            </p:panelGrid>
            <p:commandButton value="Guardar" action="#{proveedorBean.editProveedor}"
                             style="text-align:right; float:right" onclick="dlgProvEdit.hide()"
                             update=":proveedor-form:dtProv,:proveedor-form:growl">

            </p:commandButton>
          </h:form>


        </p:dialog>

      </ui:define>

    </ui:composition>

  </h:body>
</html>